<template>
  <h2>和为:{{ sum }}</h2>
  <button @click="sum++">点我加一</button>
  <br />
  <h2>{{ msg }}</h2>
  <button @click="msg += '!'">修改</button>
  <br />
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪水:{{ person.job.j1.salary }}K</h2>
  <button @click="person.name += '!'">改名</button>
  <button @click="person.age++">增寿</button>
  <button @click="person.job.j1.salary++">加薪</button>
</template>

<script>
import { reactive, ref, watch, watchEffect } from "vue";
export default {
  name: "Demo",
  beforeCreate() {},

  setup(props, context) {
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    /* watch(
      sum,
      (newValue, oldValue) => {
        console.log(`sum变了`);
      },
      { immediate: true, deep: true }
    ); */

    watchEffect(()=>{
      console.log('watchEffect');
      const x1 = sum.value;
      const x2 = person.job.j1.salary;
    });

    return {
      sum,
      msg,
      person,
    };
  },
};
</script>